<template>
    <div class="signIn">
        <div class="con">
            <van-nav-bar title="签到" left-arrow @click-left="onClickLeft" />

            <div class="message">
                <div>
                    <van-image round :src="userInfo.avatar" />
                    <span>{{ userInfo.username }}</span>
                </div>
                <div class="aignin">{{ title }}</div>
            </div>
            <van-calendar :poppable="false" :show-confirm="true" :show-title="false" :show-subtitle="false"
                confirm-text="立即签到" color="#3AA2FF" :style="{ height: '600px' }" @confirm="onConfirm"
                :show-mark="false" />

        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getSigning } from '../../../api';
import { Toast } from 'vant';

// const state = ref<any>('')
const title = ref<any>('')

const userInfo = JSON.parse(window.localStorage.getItem("userInfo") as string)

// 定义onClickLeft方法
const onClickLeft = () => history.back();

const onConfirm = () => {
    let formData = new FormData()
    getSigning(formData).then((res: any) => {
        console.log(res);
        if (res.code == 0) {
            title.value = res.msg
        } else {
            Toast(res.msg)
            title.value = res.msg
        }
    })
}

onMounted(() => {
    onConfirm()
});

</script>

<style lang="less" scoped>
@import url(../../../style/common.css);

.signIn {
    background: #FFFFFF;
    width: 100%;
    height: 100vh;
    position: relative;
}

.van-nav-bar {
    width: 100%;
    height: 52px;
}

.message {
    width: 375px;
    height: 230px;
    background: linear-gradient(180deg, #4187FF 0%, #3F82E8 100%);
    padding: 48px 19px;
    box-sizing: border-box;
    // display: flex;
    // justify-content: center;
    // flex-direction: column;

    div {
        display: flex;
        align-items: center;

        .van-image {
            width: 43px;
            height: 43px;
            border: 1px solid #FFFFFF;
            border-radius: 50%;
            margin-right: 15px;
        }

        span {
            font-size: 16px;
            color: #FFFFFF;
            line-height: 12px;
        }
    }

    .aignin {
        margin-left: 136px;
        text-align: center;
        margin-top: 26px;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 12px;

    }
}

.van-calendar {
    position: absolute;
    padding-top: 27px;
    left: 0;
    top: 203px;
    border-radius: 20px 20px 0px 0px;

}

.van-calendar__day {
    width: 32px;
    height: 45px;
    background: #3AA2FF;
    border-radius: 825px 825px 825px 825px;
}
</style>